<template>
    <div class="header-container">
        <!-- 左边的内容 -->
        <div class="l-content">
            <el-button size="mini" @click="changeCollapse"><i class="el-icon-menu"></i></el-button>
            <!-- 面包屑 -->
            <span class="text">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path,}">{{ item.label
                    }}</el-breadcrumb-item>
                </el-breadcrumb>
            </span>
        </div>
        <!-- 右边的内容 -->
        <div class="r-content">
            <el-dropdown @command="handleCommand" size="medium" style="padding-top: 20px;">
                <el-avatar shape="circle" fit="cover" size="large" :src="headImg[0].img"></el-avatar>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import Cookie from 'js-cookie'
export default {
    name: 'CommonHeader',
    data() {
        return {
            headImg: [{ img: require("../assets/headimg.jpg") }],
            flag: false,
        }
    },
    methods: {
        changeCollapse() {
            this.flag = !this.flag;
            this.$store.dispatch('changeCollapse', this.flag);
            console.log(this.flag)
        },
        //下拉框 菜单点击事件
        handleCommand(command) {
            if(command==="logout"){
                localStorage.removeItem('token')
                this.$router.push({name:'login'})
            }
        }
    },
    computed: {
        //辅助函数
        ...mapState({
            tags: state => state.tagsList
        })
    },
    mounted() {
        console.log(this.tags, "tags")
    }
}
</script>
<style lang="less" scoped>
.header-container {
    padding: 0 20px;
    background-color: black;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .l-content {
        display: flex;
        align-items: center;

        .text {
            .el-breadcrumb {
                /deep/ .el-breadcrumb__item {
                    &:last-child {
                        .el-breadcrumb__inner {
                            color: blueviolet;
                        }
                    }
                }
            }
        }
    }
}

.text {
    padding-left: 5px;
}
</style>